<template>
  <div class="video-container">
    <video 
      ref="videoRef"
      controls
      :width="width"
      :height="height"
      :autoplay="autoplay"
      :muted="muted"
    >
      <source :src="src" type="video/mp4" />
      您的浏览器不支持视频播放。
    </video>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  src: {
    type: String,
    required: true
  },
  width: {
    type: [String, Number],
    default: 640
  },
  height: {
    type: [String, Number],
    default: 360
  },
  autoplay: {
    type: Boolean,
    default: false
  },
  muted: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['ready', 'error'])

const videoRef = ref(null)

onMounted(() => {
  if (videoRef.value) {
    emit('ready', videoRef.value)
  }
})
</script>

<style scoped>
.video-container {
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>